<template>
    <Form
            ref="formValidate"
            :model="formValidate"
            :rules="ruleValidate"
            :label-width="80"
    >
        <FormItem label="菜单名称" prop="menuName">
            <Input v-model="formValidate.menuName" placeholder="菜单名称"></Input>
        </FormItem>
        <FormItem label="url" prop="url">
            <Input v-model="formValidate.url" placeholder="请输入url"></Input>
        </FormItem>
        <FormItem label="菜单类型" prop="menuType">
            <Select v-model="formValidate.menuType" placeholder="选择菜单类型">
                <Option value="目录">目录</Option>
                <Option value="导航菜单">导航菜单</Option>
                <Option value="功能按钮">功能按钮</Option>
            </Select>
        </FormItem>
        <FormItem label="排序值" prop="order">
            <Input v-model="formValidate.orderNum" placeholder="数字越大越往前"></Input>
        </FormItem>
        <FormItem label="图标" prop="icon">
            <Input
                    size="small"
                    v-model="formValidate.icon"
                    placeholder="https://www.iviewui.com/components/icon"
            >
            </Input>
        </FormItem>
        <FormItem label="图标预览" prop="icon_view">
            <Icon
                    size="50"
                    :type="formValidate.icon"
                    :custom="formValidate.icon"
            ></Icon>
        </FormItem>
        <FormItem label="组件" prop="component">
            <Input v-model="formValidate.component" placeholder="component"></Input>
        </FormItem>
        <FormItem label="权限" prop="perm">
            <Input
                    size="small"
                    v-model="formValidate.perm"
                    placeholder="权限"
            >
            </Input>
        </FormItem>

        <FormItem label="父菜单" prop="parentId">
            <Treeselect
                    v-model="formValidate.parentId"
                    :options="selectList"
                    :loadOptions="()=>{}"
            ></Treeselect>
        </FormItem>
    </Form>
</template>

<script>
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";

    export default {
        name: "edit",
        components: {
            Treeselect
        },
        props: {
            value: {
                type: Object,
                default: () => {
                }
            },
            menuList: {
                type: Array,
                default: () => []
            }
        },
        data() {
            return {
                selectList: [],
                formValidate: {
                    menuType: 0,
                    menuId: null,
                    menuName: "",
                    url: "#",
                    orderNum: 0,
                    parentId: 0,
                    icon: "",
                    perm: ''
                },
                ruleValidate: {
                    menuName: [
                        {required: true, message: "菜单名称不能为空", trigger: "blur"}
                    ],
                    url: [{required: true, message: "url不能为空", trigger: "blur"}],
                    menuType: [
                        {required: true, message: "请选择菜单类型", trigger: "change"}
                    ],
                    parentId: [
                        {required: true, message: "请选择父菜单类型"}
                    ]
                }
            };
        },
        methods: {
            validate(name = 'formValidate') {
                return new Promise((resolve, reject) => {
                    this.$refs[name].validate(valid => {
                        this.$emit('input', this.formValidate)
                        if (valid) {
                            resolve()
                        } else {
                            reject()
                        }
                    });
                })

            }
        },
        watch: {
            menuList(list) {
                const convert = it => {
                    if (!it) {
                        return null;
                    }
                    return {
                        id: it.menuId,
                        label: it.menuName,
                        children: it.children ? it.children.map(it => convert(it)) : null
                    };
                };
                this.selectList = [
                    {
                        id: 0,
                        label: "根菜单",
                        children: list.map(it => convert(it))
                    }
                ];
            },

            value(newValue) {
                this.formValidate.menuType = newValue.menuType;
                this.formValidate.url = newValue.url;
                this.formValidate.menuId = newValue.menuId;
                this.formValidate.parentId = newValue.parentId;
                this.formValidate.orderNum = newValue.orderNum;
                this.formValidate.icon = newValue.icon;
                this.formValidate.menuName = newValue.menuName;
                this.formValidate.perm = newValue.perm === '无权限' ? '' : newValue.perm;
                this.formValidate.component = newValue.component;
            }
        }
    };
</script>

<style scoped></style>
